<template>
  <div class="product-list">
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- 轮播图 -->
    <Swiper :imgList="imgList" />
    <!-- 分类 -->
    <ul class="types flex fww">
      <TypeItem :item="item" :index="index" 
        v-for="(item,index) in category"
        :key="item.categoryId" />
    </ul>
    <!-- 秒杀和拼团 -->
    <div class="middle-content">
      <div class="miaosha middle-common flex jc-sa aic">
        <span class="middle-text">秒杀</span>
        <div>
          <div class="f14">秒杀</div>
          <div class="f999 mt-5">超值惊喜</div>
          <div class="kanjia mt-5">立即砍价</div>
        </div>
        <img class="tp-img" src="@/assets/img/miaosha-icon.png" />
      </div>
      <div class="pintuan middle-common flex jc-sa aic">
        <span class="middle-text">拼团</span>
        <div>
          <div class="f14">秒杀</div>
          <div class="f999 mt-5">超值惊喜</div>
          <div class="kanjia mt-5">立即砍价</div>
        </div>
        <img class="tp-img" src="@/assets/img/pintuan-icon.png" />
      </div>
    </div>
    <!-- 优惠栏 -->
    <div class="bg-fff">
      <div class="ml-10 mr-10">
        <div class="discount flex jc-sb aic">
          <div class="fff f14 ml-5">
            <van-icon name="coupon-o" size="16px" />
            超值福利 | 全场满减
          </div>
          <div class="fff f14 mr-5">
            <span>立即领取</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐 销售 价格 -->
    <van-sticky >
       <ul class="bg-fff flex jc-sa aic f14 f666 navagater">
      <li>推荐</li>
      <li class="flex aic">
        <span>销售</span>
        <div class="flex fdc">
          <img src="@/assets/img/shangjiantouxiao.svg" />
          <img src="@/assets/img/xiajiantouxiao.svg" />
        </div>
      </li>
      <li class="flex aic">
        <span>价格</span>
        <div class="flex fdc">
          <img src="@/assets/img/shangjiantouxiao.svg" />
          <img src="@/assets/img/xiajiantouxiao.svg" />
        </div>
      </li>
    </ul>
</van-sticky>
   
    <!-- 商品列表 -->
   <div class="list-list">
       <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="getProductList"
  >
  <ul class="product_list flex jc-sa bg-fff fww">
      <router-link :to="`/product/detail/${item.productId}`" class="item-ova" v-for="(item,index) in productList" :key="index">
        <img class="bg-f4 item-img" :src="item.imgUrl" alt="四川安岳黄柠檬 3斤装（单果90-110g）" />
        <div class="mt-10 mb-15">
          <p class="text-p ovt f14">{{ item.masterName }}</p>
          <p class="text-p ovt">{{ item.slaveName }}</p>
          <p class="flex jc-sb">
            <span class="red f16"><span class="f12">￥</span>{{ item.maxPrice | fMoney }}</span>
            <span class="f999"><span>销量:</span>{{ item.inventory }}</span>
          </p>
        </div>
      </router-link>
    </ul>
  </van-list>
   </div>
</van-pull-refresh>
    
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import $http from "@/utils/request.js";
import Swiper from './list/Swiper.vue';
import TypeItem from './list/TypeItem.vue';
export default {
  //注册组件
  components: {
    Footer,
    Swiper,
    TypeItem,
  },
  data() {
    return {
      loading:false,
      finished:false,
      isLoading:false,
      currPage:1,
      imgList: [], //轮播图
      category: [], //分类列表
      productList: [], //商品列表
    };
  },
  //实例创建后生命周期
  created() {
    this.getBanners();
    this.getCategory();
    this.getProductList();
  },
  methods: {
      onRefresh() {
        let params ={
          currPage:1,
        }
        $http.get('/product/list',{params}).then(res =>{
          this.currPage = 2;
          this.isLoading = false;
          this.productList = res.list
        })
    },
    //轮播图数据
    getBanners() {
      $http.get("/product/getBanners").then((res) => {
        this.imgList = res.banners;
      });
    },
    //分类数据
    getCategory() {
      $http.get("/category/all").then((res) => {
        this.category = res.list;
      });
    },
    //商品列表
    getProductList() {
      let params = {
        currPage: this.currPage
      }
      $http.get("/product/list",{params}).then((res) => {
        this.currPage++;
        this.productList = [...this.productList, ...res.list];
        this.loading = false;
        if(res.list.length === 0){
          this.finished = true
        }
      });
    },
  },
};
</script>

<style lang="less" >
.product-list{
width: 100vw;
overflow: hidden;
}
//轮播
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 210px;
  text-align: center;
  .img {
    width: 100%;
    height: 210px;
  }
}
//分类列表
.types {
  width: 100%;
  .points {
    width: 25%;
    height: 95px;
    .points-img {
      width: 45px;
      height: 45px;
    }
  }
}
//秒杀和拼团
.middle-content {
  width: 100%;
  height: 110px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  .miaosha {
    padding-left: 10px;
    width: 170px;
    background: url(http://fresh.huruqing.cn/img/miaosha-bg.1e1a2d1e.png) 50%
      no-repeat;
    background-size: 100%;
    height: 100px;
  }
  .pintuan {
    padding-left: 10px;
    width: 170px;
    background: url(http://fresh.huruqing.cn/img/pintuan-bg.e9cbdf93.png) 50%
      no-repeat;
    background-size: 100%;
    height: 100px;
  }
  .middle-common {
    position: relative;
    .middle-text {
      position: absolute;
      right: 1px;
      top: 4px;
      color: #fff;
    }
  }
  .kanjia {
    padding: 3px 5px;
    background: #d92c01;
    color: #fff;
    border-radius: 4px;
  }
  .tp-img {
    width: 70px;
    height: 70px;
  }
}
// 优惠导航栏
.discount {
  background: url()
    50% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 37px;
}
// 推荐销售价格导航
.navagater {
  width: 100%;
  height: 44px;
  margin-bottom: 1px;
}
//商品列表
.product_list {
  .item-ova {
    width: 165px;
    .item-img{
      width: 165px;
      height: 165px;
    }
    .text-p{
      line-height: 1.5;
    }
  }
}
.list-list{
  margin-bottom: 50px;
}
</style>
